<template>
	<view>
		<u-loading-page :loading="pageLoading"></u-loading-page>
		<view v-if="!pageLoading">
			<view class="first-section">
				<view class="text-center" style="font-size: 17px;font-weight: bold;">镇川镇五级五长·智慧治理</view>
				<view  class="text-center mt-20" style="font-size: 12px;">数字赋能基层治理，实现精细化管理与民主化治理相结合</view>
				<view class="tags mt-30">
					<view><text class="ri-hand-heart-line"></text>村民自治</view>
					<view><text class="ri-cloud-line"></text>智慧村镇</view>
					<view><text class="ri-plant-line"></text>乡村振兴</view>
				</view>
			</view>
			<view class="section pb-20">
				<view class="section-title">指标概览</view>
				<view class="grid row-2">
					<view v-for="item in info.dashboardSummary.dashboardSummary.keyStats">

						<view class="icon"><text :class="item.icon"></text></view>
						<view style="font-size: 14px;color:#999;"> {{item.title}}</view>
						<view class="mt-20" style="display: flex;align-items: center;justify-content: center;">
							<view style="color:#333;font-size: 16px;font-weight: bold;">{{item.value}}</view>
							<view style="font-size:12px;color:#666;margin-left:5px;">{{item.change}}</view>
						</view>
					</view>
				</view>
			</view>
			<!--五级治理体系-->
			<view class="section">
				<view class="section-title">五级治理体系</view>
				<swiper class="swiper" circular :indicator-dots="true" style="height:120px;">
								<swiper-item v-for="item in info.governanceLevels">
									<view class="levels-item" @click="navTo(`/pages/governance/show${item.id}`,{level:item.level})">
										<view class="left">
											{{item.level}}
										</view>
										<view class="right">
											<view style="font-size: 17px;color:#333;">{{item.name}}</view>
											<view class="mt-10" style="font-size: 12px;color:#999;">{{item.managers}}</view>
											<view class="mt-10" style="font-size: 13px;color:#666;">{{item.shortDescription}}</view>
										</view>
									
									</view>
								</swiper-item>
							</swiper>
				
			</view>
			<!--社区概况-->
			<view class="section">

				<view class="sub-title">
					<view class="icon">
						<text :style="{color:info.townCoverageOverview.communityOverviewiconColor}"
							:class="info.townCoverageOverview.communityOverview.icon"></text>
					</view>
					<view class="center">
						<view style="font-size: 16px;font-weight: bold;color:#333;">
							{{info.townCoverageOverview.communityOverview.name}}
						</view>
						<view class="mt-10" style="font-size: 12px;color:#999;">
							{{info.townCoverageOverview.communityOverview.location}}
						</view>
					</view>
					<view class="right">{{info.townCoverageOverview.communityOverview.badge}}</view>
				</view>
				<view class="grid row-2">
					<view v-for="item in info.townCoverageOverview.communityOverview.stats">
						<view>
							<view style="font-size: 18px;font-weight: bold;color:#333;">{{item.value}}</view>
							<view class="mt-20" style="color:#999;font-size:12px;">{{item.label}}</view>
						</view>
					</view>
				</view>

			</view>
			<view class="section">
				<!--行政村分布-->
				<view class="sub-title">
					<view class="icon">
						<text :style="{color:info.townCoverageOverview.villageOverview.iconColor}"
							:class="info.townCoverageOverview.villageOverview.icon"></text>
					</view>
					<view class="center">
						<view style="font-size: 16px;font-weight: bold;color:#333;">
							{{info.townCoverageOverview.villageOverview.title}}
						</view>
						<view class="mt-10" style="font-size: 12px;color:#999;">
							{{info.townCoverageOverview.villageOverview.badge}}
						</view>
					</view>
				</view>
				<view class="p-30 village-list">
					<text class="village-item"
						v-for="item in info.townCoverageOverview.villageOverview.villageList">{{item}}</text>
					<text style="font-size: 14px;color:#999;margin-left:5px;">+{{info.townCoverageOverview.villageOverview.remainingCount}}个村</text>
				</view>
				<view class="grid row-2">
					<view v-for="item in info.townCoverageOverview.villageOverview.stats">
						<view>
							<view style="font-size: 18px;font-weight: bold;color:#333;">{{item.value}}</view>
							<view class="mt-20" style="color:#999;font-size:12px;">{{item.label}}</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height:30rpx"></view>
		</view>
	</view>
</template>

<script>
	import {
		getPageGovernance
	} from '@/config/api.js';
	export default {
		data() {
			return {
				pageLoading: false,
				info: {}
			}
		},
		onLoad() {
			this.getPageData(() => {
				this.pageLoading = false;
			});
		},
		onPullDownRefresh() {
			this.getPageData(function(){
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			getPageData(cb) {
				getPageGovernance().then(res => {
					this.info = res.layout;
					typeof cb == 'function' && cb();
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.section {
		width: calc(100% - 60rpx);
		margin: 30rpx auto 0;
		background-color: white;
		border-radius: 10px;

		.section-title {
			font-size: 17px;
			font-weight: bold;
			padding: 20px;
		}

		.badge {
			display: inline-block;
			font-size: 12px;
			background-color: lightcoral;
			color: white;
			padding: 2px 8px;
			border-radius: 5px;
		}
	}

	.tabs {
		display: flex;
		flex-wrap: wrap;

		.tabs-item {
			flex: 1;
			text-align: center;
			font-size: 17px;
			font-weight: bold;
			padding: 10px 20px;
			border-bottom: 2px solid #eee;

			&.on {
				border-color: lightcoral;
			}
		}
	}

	.grid {
		display: flex;
		flex-wrap: wrap;

		&>view {
			width: calc(50% - 20px);
			margin: 10px;
			text-align: center;
		}

		&.row-2 {
			&>view {
				width: calc(50% - 20px);
			}
		}
	}

	.sub-title {
		display: flex;
		align-items: center;
		padding: 15px ;

		.icon {
			width: 40px;
			height: 40px;
			border-radius: 40px;
			background-color: #eee;
			text-align: center;
			line-height: 40px;
		}
		.center {
			padding-left: 10px;
			flex-grow: 1;
		}

		.right {
			font-size: 12px;
			display: inline-block;
			padding: 2px 8px;
			border-radius: 5px;
			background-color: lightcyan;
			color: royalblue;
			border: 1rpx solid #eee;

		}
	}

	.village-list {
		margin: -5px;
	}

	.village-item {
		color: #666;
		margin: 5px;
		font-size: 12px;
		display: inline-block;
		padding: 2px 8px;
		border-radius: 5px;
		background-color: white;
		border: 1rpx solid #eee
	}
	.levels-item{
		padding:10px 20px;
		display: flex;
		align-items: center;
		.left{
			flex-shrink: 0;
			background-color: lightsalmon;
			color:white;
			text-align: center;
			line-height: 40px;
			width:40px;
			height:40px;
		}
		.right{
			padding-left: 15px;
			flex-grow: 1;
		}
	}
	.first-section{
		width: calc(100% - 60rpx);
		margin: 30rpx auto 0;
		padding:80rpx 30rpx ;
		background-color: white;
		border-radius: 10px;
		background-image:linear-gradient(to right,#41409B,#605FB2);
		color:white;
	}
	.tags{
		margin-left:-5px;
		margin-right:-5px;
		&>view{
			display: inline-block;
			padding:4px 10px;
			background-color: rgba(255,255,255,0.3);
			border-radius: 50em;
			color:white;
			font-size: 12px;
			margin:5px;
			&>text{
				margin-right: 5px;
			}
		}
		
	}
</style>